<fieldset [disabled]="(processing$ | async) || (removing$ | async) || false">
    <form (ngSubmit)="submit()" [formGroup]="form" class="form-group mb-0" novalidate>
        <div class="rounded mb-2">
            <div class="d-inline-block">
                <span *ngIf="account; else label" [attr.data-login]="account.login">{{ account.login }}</span>
                <ng-template #label>Add Account</ng-template>
            </div>
            <div class="custom-control custom-switch float-md-right">
                <input class="custom-control-input" formControlName="database" id="databaseCheckbox" type="checkbox">
                <label class="custom-control-label" for="databaseCheckbox">
                    Local store
                    <i
                        [popover]="localStorePopoverTemplate"
                        class="fa fa-info-circle text-primary"
                        container="body"
                        placement="bottom"
                        triggers="mouseenter:mouseleave"
                    ></i>
                    <ng-template #localStorePopoverTemplate>
                        <p>
                            The <code>local store</code> feature enables storing your messages in the encrypted <code>database.bin</code>
                            file,
                            so you could view your messages offline, perform full-text search against them and export them to EML/JSON files.
                        </p>
                        <p>
                            Initial data fetching might take a long time, like even hours, depending on the number of emails in the account.
                            So just wait until the data fetching icon on the account handle button stopped blinking in green.
                        </p>
                    </ng-template>
                    <a href="{{ PACKAGE_GITHUB_PROJECT_URL }}/wiki/FAQ">FAQ</a>
                </label>
            </div>
        </div>

        <div class="row">
            <ng-template #ngSelectEntryItemTpm let-index="index" let-item="item">{{ item.title }}</ng-template>
            <div class="col-md-6 required form-group">
                <label class="d-block mb-2">Entry Proton App</label>
                <ng-select
                    [clearable]="false"
                    [items]="entryProtonApps"
                    [searchable]="false"
                    bindLabel="title"
                    bindValue="value"
                    formControlName="entryProtonApp"
                    id="entryProtonAppField"
                >
                <ng-template let-index="index" let-item="item" ng-label-tmp>
                    <ng-container [ngTemplateOutletContext]="{item: item, index: index}" [ngTemplateOutlet]="ngSelectEntryItemTpm"></ng-container>
                </ng-template>
                <ng-template let-index="index" let-item="item" ng-option-tmp>
                    <div [attr.entry-proton-app-option-index]="index">
                        <ng-container [ngTemplateOutletContext]="{item: item, index: index}" [ngTemplateOutlet]="ngSelectEntryItemTpm"></ng-container>
                    </div>
                </ng-template>
            </ng-select>
            </div>
            <div class="col-md-6 required form-group">
                <div class="d-flex justify-content-between">
                    <label class="d-block mb-2">Proton API</label>
                    <div class="mb-2">
                        <a href="{{ PACKAGE_GITHUB_PROJECT_URL }}/issues/29">#29</a>,
                        <a href="{{ PACKAGE_GITHUB_PROJECT_URL }}/issues/79">#79</a>,
                        <a href="{{ PACKAGE_GITHUB_PROJECT_URL }}/issues/80">#80</a>,
                        <a href="{{ PACKAGE_GITHUB_PROJECT_URL }}/issues/164">#164</a>
                    </div>
                </div>
                <ng-select
                    [clearable]="false" [searchable]="false" [items]="entryUrlItems" bindLabel="title" bindValue="value"
                    formControlName="entryUrl" id="accountEditFormEntryUrlField"
                >
                    <ng-template let-index="index" let-item="item" ng-label-tmp>
                        <ng-container [ngTemplateOutletContext]="{item: item, index: index}" [ngTemplateOutlet]="ngSelectEntryItemTpm"></ng-container>
                    </ng-template>
                    <ng-template let-index="index" let-item="item" ng-option-tmp>
                        <div [attr.entry-url-option-index]="index">
                            <ng-container [ngTemplateOutletContext]="{item: item, index: index}" [ngTemplateOutlet]="ngSelectEntryItemTpm"></ng-container>
                        </div>
                    </ng-template>
                </ng-select>
            </div>
        </div>

        <div *ngIf="!account" class="form-group required">
            <label>Login</label>
            <input
                [ngClass]="{'is-invalid': controls.login.dirty && controls.login.invalid}"
                class="form-control form-control-sm"
                formControlName="login"
                type="text"
            >
        </div>
        <div class="row row-primary-fields">
            <div class="col-md-6 form-group">
                <div class="custom-control custom-switch">
                    <input class="custom-control-input" formControlName="persistentSession" id="persistentSessionCheckbox" type="checkbox">
                    <label class="custom-control-label d-flex" for="persistentSessionCheckbox">
                        Persistent session
                        <i
                            class="fa fa-info-circle text-warning align-self-center ml-1"
                            container="body"
                            placement="bottom"
                            [popover]="'If option enabled the saved &quot;Proton Session&quot; will be reused on the next computer/app start and so the login form will be skipped.'"
                            triggers="mouseenter:mouseleave"
                        ></i>
                        <a class="ml-1" href="{{ PACKAGE_GITHUB_PROJECT_URL }}/issues/227">#227</a>
                    </label>
                </div>
            </div>
            <div class="col-md-6 form-group form-inline">
                <label class="pr-1">
                    Login alias
                    <i
                        class="fa fa-info-circle text-primary align-self-center"
                        style="margin-left: 3px"
                        container="body"
                        placement="bottom"
                        [popover]="'If specified, it will be displayed in the app UI instead of login value. The alias value also gets displayed in the desktop notification message.'"
                        triggers="mouseenter:mouseleave"
                    ></i>
                </label>
                <input class="form-control form-control-sm d-flex flex-grow-1" formControlName="title" type="text">
            </div>
        </div>
        <accordion [closeOthers]="true" class="mb-3">
            <accordion-group [isOpen]="false" heading="Custom CSS">
                <textarea class="form-control form-control-sm" rows="10" formControlName="customCSS"></textarea>
            </accordion-group>
            <accordion-group [isOpen]="false" heading="Advanced Options">
                <div class="row">
                    <div class="col-md-6 form-group">
                        <label class="d-block pull-left">
                            Proxy rules
                            <i
                                class="fa fa-info-circle text-primary align-self-center"
                                container="body"
                                placement="bottom"
                                [popover]="'Rules indicating which proxies to use.'"
                                triggers="mouseenter:mouseleave"
                            ></i>
                        </label>
                        <a
                            class="d-block pull-right"
                            href="https://github.com/electron/electron/blob/21afda36794393731f14c5b4a4c71dc3ed0484c3/docs/api/session.md#sessetproxyconfig"
                        >
                            info
                        </a>
                        <input class="form-control form-control-sm" formControlName="proxyRules" type="text">
                    </div>
                    <div class="col-md-6 form-group">
                        <label class="d-block pull-left">
                            Proxy bypass rules
                            <i
                                class="fa fa-info-circle text-primary align-self-center"
                                container="body"
                                placement="bottom"
                                [popover]="'Rules indicating which URLs should bypass the proxy settings.'"
                                triggers="mouseenter:mouseleave"
                            ></i>
                        </label>
                        <a
                            class="d-block pull-right"
                            href="https://github.com/electron/electron/blob/21afda36794393731f14c5b4a4c71dc3ed0484c3/docs/api/session.md#sessetproxyconfig"
                        >
                            info
                        </a>
                        <input class="form-control form-control-sm" formControlName="proxyBypassRules" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <div class="custom-control custom-switch">
                        <input
                            class="custom-control-input"
                            formControlName="blockNonEntryUrlBasedRequests"
                            id="blockNonEntryUrlBasedRequestsCheckbox"
                            type="checkbox"
                        >
                        <label class="custom-control-label d-flex" for="blockNonEntryUrlBasedRequestsCheckbox">
                            Block non "API entry point"-based network requests
                            <i
                                class="fa fa-info-circle text-warning align-self-center ml-1"
                                container="body"
                                placement="bottom"
                                [popover]="'So, for example, the inlined in the email messages images loading will be blocked if this option enabled.'"
                                triggers="mouseenter:mouseleave"
                            ></i>
                            <a class="ml-1" href="{{ PACKAGE_GITHUB_PROJECT_URL }}/issues/312">#312</a>
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <div class="custom-control custom-switch mb-2">
                        <input
                            class="custom-control-input"
                            formControlName="enableExternalContentProxy"
                            id="enableExternalContentProxyCheckbox"
                            type="checkbox"
                        >
                        <label
                            (click)="touchExternalContentProxyUrlPatternControl()"
                            class="custom-control-label d-block"
                            for="enableExternalContentProxyCheckbox"
                        >
                            Route remote images through a proxy
                            <i
                                [popover]="enableExternalContentProxyPopoverContent"
                                class="fa fa-info-circle text-warning align-self-center"
                                container="body"
                                placement="bottom"
                                triggers="mouseenter:mouseleave"
                            ></i>
                            <ng-template #enableExternalContentProxyPopoverContent>
                                Image requests to the specified proxy will bypass the non &quot;API entry point&quot;-based network
                                requests blocking if such blocking enabled (see respective toggle upper on the form).
                            </ng-template>
                            <a
                                (click)="$event.preventDefault(); fillDefaultExternalContentProxyUrlPattern()"
                                href="javascript:void(0)"
                            >(fill in the example value)</a>
                            <div class="pull-right">
                                <a href="{{ PACKAGE_GITHUB_PROJECT_URL }}/issues/312">#312</a>
                            </div>
                        </label>
                    </div>
                    <input
                        [ngClass]="{'is-invalid': controls.externalContentProxyUrlPattern.dirty && controls.externalContentProxyUrlPattern.invalid}"
                        class="form-control form-control-sm"
                        formControlName="externalContentProxyUrlPattern"
                        type="text"
                    >
                    <div
                        *ngIf="controls.externalContentProxyUrlPattern.invalid && controls.externalContentProxyUrlPattern.errors?.errorMsg"
                        [innerText]="controls.externalContentProxyUrlPattern.errors?.errorMsg"
                        class="invalid-feedback"
                    ></div>
                </div>
                <div class="form-group">
                    <label class="d-block pull-left">
                        Login delay range (seconds)
                        <i
                            class="fa fa-info-circle text-warning align-self-center"
                            container="body"
                            placement="bottom"
                            [popover]="'The login delay is picked by either time range or account selection triggers. Whichever kicks in first if both values defined.'"
                            triggers="mouseenter:mouseleave"
                        ></i>
                    </label>
                    <div class="custom-control custom-switch float-md-right">
                        <input
                            class="custom-control-input"
                            formControlName="loginDelayUntilSelected"
                            id="loginDelayUntilSelectedCheckbox"
                            type="checkbox"
                        >
                        <label class="custom-control-label" for="loginDelayUntilSelectedCheckbox">
                            Login on account selection
                        </label>
                    </div>
                    <input
                        [ngClass]="{'is-invalid': controls.loginDelaySecondsRange.dirty && controls.loginDelaySecondsRange.invalid}"
                        class="form-control form-control-sm"
                        formControlName="loginDelaySecondsRange"
                        type="text"
                    >
                    <div
                        *ngIf="controls.loginDelaySecondsRange.invalid && controls.loginDelaySecondsRange.errors?.errorMsg"
                        [innerText]="controls.loginDelaySecondsRange.errors?.errorMsg"
                        class="invalid-feedback"
                    ></div>
                </div>
                <div class="form-group">
                    <label>Custom "User-Agent" request header</label>
                    <input
                        [ngClass]="{'is-invalid': controls.customUserAgent.dirty && controls.customUserAgent.invalid}"
                        class="form-control form-control-sm"
                        formControlName="customUserAgent"
                        type="text"
                    >
                </div>
                <div class="custom-control custom-switch clearfix">
                    <input class="custom-control-input" formControlName="localStoreViewByDefault" id="localStoreViewByDefaultCheckbox" type="checkbox">
                    <label class="custom-control-label d-flex" for="localStoreViewByDefaultCheckbox">
                        Enable the&nbsp;<a href="{{ PACKAGE_GITHUB_PROJECT_URL }}/wiki/FAQ">local store</a>&nbsp;view mode by default
                    </label>
                </div>
            </accordion-group>
            <accordion-group [isOpen]="false" heading="Desktop Notifications">
                <div *ngIf="controls.customNotification.disabled" class="mb-2 custom-notification-hint">
                    The feature becomes available for use when:
                    <ul>
                        <li>
                            The&nbsp;<a href="{{ PACKAGE_GITHUB_PROJECT_URL }}/wiki/FAQ">local store</a>&nbsp;is enabled for the account.
                        </li>
                        <li>
                            The bootstrap/initial data fetch of the <a href="{{ PACKAGE_GITHUB_PROJECT_URL }}/wiki/FAQ">local store</a>
                            feature is completed.
                        </li>
                    </ul>
                </div>
                <div class="custom-control custom-switch clearfix">
                    <input
                        class="custom-control-input"
                        formControlName="customNotification"
                        id="customNotificationCheckbox"
                        type="checkbox"
                    >
                    <label class="custom-control-label d-flex" for="customNotificationCheckbox">
                        Custom notification content
                        <a class="ml-1" href="{{ PACKAGE_GITHUB_PROJECT_URL }}/issues/387">#387</a>
                    </label>
                </div>
                <input class="custom-control-input" formControlName="customNotificationCode" type="hidden">
                <electron-mail-account-edit-notification-editor
                    (content)="customNotificationCodeChange($event)"
                    *ngIf="account"
                    [editable]="(customNotificationCodeEditable$ | async) || false"
                    [initialContent]="controls.customNotificationCode.value"
                    [login]="account.login"
                ></electron-mail-account-edit-notification-editor>
                <div class="custom-control custom-switch clearfix mt-2">
                    <input
                        class="custom-control-input"
                        formControlName="notificationShellExec"
                        id="notificationShellExecCheckbox"
                        type="checkbox"
                    >
                    <label class="custom-control-label d-flex" for="notificationShellExecCheckbox">
                        Shell command execution
                        <a class="ml-1" href="{{ PACKAGE_GITHUB_PROJECT_URL }}/issues/387">#387</a>
                    </label>
                </div>
                <input class="custom-control-input" formControlName="notificationShellExecCode" type="hidden">
                <electron-mail-account-edit-notification-exec-editor
                    (content)="notificationShellExecCodeChange($event)"
                    *ngIf="account"
                    [editable]="(notificationShellExecCodeEditable$ | async) || false"
                    [initialContent]="controls.notificationShellExecCode.value"
                    [login]="account.login"
                ></electron-mail-account-edit-notification-exec-editor>
            </accordion-group>
            <accordion-group [isOpen]="false" heading="Account Credentials (obsolete)">
                <div class="alert alert-warning">
                    <p>
                        It's recommended to keep the below credentials input fields empty since the preferred "auto-login into the account"
                        scenario is via the
                        <a href="https://github.com/vladimiry/ElectronMail/issues/227">persistent sessions</a> feature.
                    </p>
                    <p>
                        If you fill the below credentials values then the app will automatically fill in and submit the respective forms
                        when ProtonMail asks you to do so.
                    </p>
                </div>
                <div class="form-group">
                    <label>Password</label>
                    <input
                        [ngClass]="{'is-invalid': controls.password.dirty && controls.password.invalid}"
                        class="form-control form-control-sm"
                        formControlName="password"
                        type="password"
                    >
                </div>
                <div class="form-group">
                    <label class="d-block pull-left">
                        Two-Factor secret key
                        <i
                            class="fa fa-info-circle text-warning align-self-center"
                            container="body"
                            placement="bottom"
                            [popover]="'This is not the one time password your phone generates for you but a secret seed. Please follow the description link for details.'"
                            triggers="mouseenter:mouseleave"
                        ></i>
                    </label>
                    <a class="d-block pull-right" href="{{ PACKAGE_GITHUB_PROJECT_URL }}/issues/10">#10</a>
                    <input
                        [ngClass]="{'is-invalid': controls.twoFactorCode.dirty && controls.twoFactorCode.invalid}"
                        class="form-control form-control-sm"
                        formControlName="twoFactorCode"
                        type="password"
                    >
                </div>
                <div class="form-group">
                    <label class="d-block pull-left">
                        Mailbox password
                        <i
                            class="fa fa-info-circle text-warning align-self-center"
                            container="body"
                            placement="bottom"
                            [popover]="'This field is only relevant if you have two-password mode enabled for your account. Please follow the description links for details.'"
                            triggers="mouseenter:mouseleave"
                        ></i>
                    </label>
                    <div class="pull-right">
                        <a href="https://protonmail.com/support/knowledge-base/switch-two-password-mode/">description</a>,
                        <a href="{{ PACKAGE_GITHUB_PROJECT_URL }}/issues/138">#138</a>
                    </div>
                    <input
                        [ngClass]="{'is-invalid': controls.mailPassword.dirty && controls.mailPassword.invalid}"
                        class="form-control form-control-sm"
                        formControlName="mailPassword"
                        type="password"
                    >
                </div>
                <div class="text-muted">
                    <small>
                        The credentials stored encrypted in the <code>settings.bin</code> file located in the
                        <a (click)="$event.preventDefault(); openSettingsFolder();" href="{{ userDataDir }}">settings folder</a>.
                        See <a href="{{ PACKAGE_GITHUB_PROJECT_URL }}/wiki/FAQ">FAQ</a> for details.
                    </small>
                </div>
            </accordion-group>
        </accordion>
        <div class="clearfix">
            <button (click)="remove()" *ngIf="account" class="btn btn-sm btn-outline-danger pull-left" type="button">
                <i
                    [ngClass]="{
                    'fa-spinner fa-pulse fa-fw': (removing$ | async),
                    'fa-times': !(removing$ | async)
                }" class="fa"
                ></i>
                Remove
            </button>
            <button [disabled]="form.invalid" class="btn btn-sm btn-primary pull-right" type="submit">
                <i
                    [ngClass]="{
                    'fa-spinner fa-pulse fa-fw': (processing$ | async),
                    'fa-check': !(processing$ | async)
                }" class="fa"
                ></i>
                {{ account ? "Update" : "Add" }}
            </button>
        </div>
    </form>
</fieldset>
